import React from 'react'
import { connect } from 'react-redux'
import classnames from 'classnames'
import { NavLink } from 'react-router-dom'
import ConfirmDialog from '../ConfirmDialog'
import './style.less'

const mapStateToProps = (state) => {
  return {
    userInfo: state.app.userInfo,
    currentGroup: state.group.currentGroup
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    openModal: msg => dispatch(global.allActions.groupActions.openModal(msg)),
    changeCurrentGroup: (groupData) => dispatch(global.allActions.groupActions.changeCurrentGroup(groupData))
  }
}

const Step1 = (props) => {
  const {userInfo, close, modify, groupName, groupNameChange} = props
  return <div className="dialog-block has-mask full" >
    <div className="group-content content">
      <div className="full-width title-wrapper group">
        <img onClick={close} className="close" src="img/mall/dialog/close.png" alt="" />
      </div>
      <div className="modal-wrapper">
        <div className="buy-row first group-modal-content">
          <div className="group-modal-content-row v-center">
            俱乐部头像:
            <img src={userInfo.headUrl} className="group-head-img" alt=""/> 
          </div>
          <div className="group-modal-content-row v-center">
            俱乐部名称: <input type="text" className="group-name-ipt" placeholder="" value={groupName} onChange={groupNameChange}></input>
          </div>      
        </div>
        <div className="bottom-btn">
          <img className="confirm" onClick={close} src="img/mall/dialog/cancel.png" alt=""></img>
          <img className="confirm" onClick={() => {modify(groupName)}} src="img/mall/dialog/confirm.png" alt=""></img>
        </div>
      </div>
    </div>
  </div>
}

class Info extends React.Component<any, any> {
  public constructor(props) {
    super(props)
    this.state = {
      showConfirm: false,
      tip: '',
      memberList: [],
      sample: undefined,
      showModify: false,
      groupName: ''
    }
  }
  
  public componentDidMount() {
    this.queryMembers()
    this.setState({groupName: this.props.currentGroup.crwodName})
  }

  handleClick() {
    const tip = this.props.currentGroup.owner === 1 ? '确定解散俱乐部?删除将无法恢复!!!' : '确定退出俱乐部?'
    this.setState({showConfirm: true, tip})
  }

  queryMembers() {
    const url = `${config.pre}/crowd/relation/${Cookies.get('areaCode')}/order`
    const opt = { method: 'GET' }
    const query = {
      crowdId: this.props.currentGroup.id,
      offset: 0,
      limit: 200
    }
    console.log(opt);
    fetchJson(url, opt, query).then(data => {
      console.log(data)
      if (data.result) {
        return
      }
      this.setState({memberList: data.data.dataList, sample: _.sample(data.data.dataList)})
    })
  }

  openModify() {
    if (this.props.currentGroup.owner === 1) {
      this.setState({showModify: true})
    }
  }

  confirm() {
    if (this.props.currentGroup.owner === 1) {
      // this.dismiss()
    } else {
      this.quit()
    }
  }

  dismiss() {
    const url = `${config.pre}/crowd/info/${Cookies.get('areaCode')}/${this.props.currentGroup.id}`
    const opt = { 
      method: 'DELETE'
    }
    console.log(opt);
    fetchJson(url, opt).then(data => {
      console.log(data)
      this.props.openModal(data.message)
      window.location.hash = 'GroupPlay'
    })
  }

  quit() {
    const url = `${config.pre}/crowd/info/${Cookies.get('areaCode')}/exit/${this.props.currentGroup.id}`
    const opt = { 
      method: 'DELETE'
    }
    console.log(opt);
    fetchJson(url, opt).then(data => {
      console.log(data)
      this.props.openModal(data.message)
      window.location.hash = 'GroupPlay'
    })
  }

  groupNameChange(e) {
    this.setState({groupName: _.trim(e.target.value)})
  }

  modify() {
    console.log('modify')
    const url = `${config.pre}/crowd/info/${Cookies.get('areaCode')}`
    const opt = { 
      method: 'PUT', 
      body: JSON.stringify({
        crowdName: this.state.groupName,
        crowdHead: this.props.userInfo.headUrl,
        id: this.props.currentGroup.id
      })
    }
    console.log(opt);
    fetchJson(url, opt).then(data => {
      console.log(data)
      this.setState({showModify: false})
      this.props.openModal(data.message)
      // this.updateGroupInfo()
    })
  }

  updateGroupInfo() {
    const url = `${config.pre}/crowd/info/${Cookies.get('areaCode')}/newcrowd`
    fetchJson(url).then(data => {
      console.log(data)
      if (data.result) {
        this.props.openModal(data.message)
      } else {
        const currentSelected = data.data.dataList.find(group => group.id === this.props.currentGroup.id)
        // this.props.changeCurrentGroup(currentSelected)
      }
    })
  }

  public render() {
    const {currentGroup, userInfo} = this.props
    const {showConfirm, tip, sample, showModify, groupName} = this.state
    return <div className="view-page group-view">
      <div className="maininfo-header v-center column">
        <img className="group-icon-main" src={currentGroup.crowdHead} alt=""/>
        <div className="mtr-5">{currentGroup.crwodName}</div>
        <div className="mtr-5">俱乐部ID: {currentGroup.crowdId}</div>
      </div>
      <div className="maininfo-body">
        <div className="group-item member-list-item v-center" onClick={() => window.location.hash = 'MemberList'}>
          <div>
            <span className="mlr-5">成员: {currentGroup.number}人 </span>
          </div>
          <div className="v-center">
            <img className="group-header-icon" src={sample ? sample.headUrl: ''} alt=""/>    
            <img className="main-info-arrow" src="img/groupNew/ARROW.png" alt=""/>    
          </div>
        </div>
        <div className="group-item member-list-item v-center" onClick={this.openModify.bind(this)}>
          <div>
            <span className="mlr-5">俱乐部名称 </span>
          </div>
          <div className="v-center">
            <span className="mrr-10">{currentGroup.crwodName}</span>
            {
              currentGroup.owner === 1 ? <img className="main-info-arrow" src="img/groupNew/ARROW.png" alt=""/> : null
            } 
          </div>
        </div>
        <div className="group-item member-list-item v-center">
          <div>
            <span className="mlr-5">俱乐部头像 </span>
          </div>
          <div className="v-center">
            <img className="group-header-icon mrr-10" src={currentGroup.crowdHead} alt=""/>    
            {/* <img className="main-info-arrow" src="img/groupNew/ARROW.png" alt=""/>     */}
          </div>
        </div>
        {/* <img onClick={this.handleClick.bind(this)} className="dismiss-btn" src="img/groupNew/dismiss.png" alt=""/> */}
        {
          currentGroup.owner === 1 ? null : <img onClick={this.handleClick.bind(this)} className="dismiss-btn" src="img/groupNew/quit.png" alt=""/>
        }
      </div>
      <div className="inner-bottom">
          <div className="text vh-center"><span>俱乐部成员</span></div>
          <NavLink to="/Inner"><img className="back" src="img/app/back.png" alt="" /></NavLink>
      </div>
      {
        showConfirm ? <ConfirmDialog modalContent={tip}
         close={() => this.setState({showConfirm: false})} confirm={this.confirm.bind(this)}></ConfirmDialog> : null 
      }
      {
        showModify ? <Step1 userInfo={userInfo} close={() => this.setState({showModify: false})} groupName={groupName} groupNameChange={this.groupNameChange.bind(this)} modify={this.modify.bind(this)}></Step1> : null
      }
    </div>
  }

}

export default connect(mapStateToProps, mapDispatchToProps)(Info)